<template>
    <div>
        <li class="list-group-item d-flex justify-content-between">
            <div class="form-check d-inline-block">
                <input v-model="check" class="form-check-input" type="checkbox" :id="'flexCheckDefault' + id" />
                <!-- 是否完成的checkbox -->
                <label class="form-check-label" :for="'flexCheckDefault' + id"
                    :class="{ 'text-decoration-line-through': check }">{{ content }}</label>
            </div>
            <button class="btn-close" @click="del"></button>
        </li>
    </div>
</template>
<script>
export default {
    props: ['todoContent', 'checked', 'todoId'],
    computed: {
        // prop属性全部交给计算属性监视
        content() { return this.todoContent},
        id() {return this.todoId},
        check: {
            get() {
                return this.checked
            },
            // check改变时，set通知父组件 修改 checked数据
            set(value) {
                this.$emit('updateFatherItem', value, this.id)
            }
        }
    },
    methods: {
        del() {
            this.$emit('delItem', this.id)
        }
    },
}
</script>
<style>
</style>